<template>
  <div class="home" v-loading="loading" ref="home">
    <div class="top-home d-start">
      <div class="one">
        <div class="title-top d-center">
          <i class="el-icon-user-solid" style="color:white"></i>
        </div>
        <el-tooltip class="item" effect="dark" :content="`${zlcnum}km`" placement="top">
          <div class="sub-top">
            <span :class="{font:Number(clientHeight) < 1440}">
              {{zlcnum.toFixed(2)}}
              <span>km</span>
            </span>

            <em style="font-style:normal">建设里程</em>
          </div>
        </el-tooltip>
      </div>

      <div class="one">
        <div class="title-top d-center" style="background: #f8d134;">
          <i class="el-icon-user-solid" style="color:white"></i>
        </div>
        <el-tooltip class="item" effect="dark" :content="`${xmgsnum}个`" placement="top">
          <div class="sub-top">
            <span :class="{font:Number(clientHeight) < 1440}">
              {{xmgsnum}}
              <span>个</span>
            </span>
            <em style="font-style:normal">项目个数</em>
          </div>
        </el-tooltip>
      </div>
      <div class="one">
        <div class="title-top d-center" style="background: #48d15f;">
          <i class="el-icon-user-solid" style="color:white"></i>
        </div>
        <el-tooltip class="item" effect="dark" :content="`${gstznums}万元`" placement="top">
          <div class="sub-top">
            <span :class="{font:Number(clientHeight) < 1440}">
              {{gstznum}}
              <span>{{daxiao}}</span>
            </span>
            <em style="font-style:normal">概算投资总额</em>
          </div>
        </el-tooltip>
      </div>
      <!-- <div class="one">
        <div class="title-top d-center" style="background: #9c6bff;">
          <i class="el-icon-user-solid" style="color:white"></i>
        </div>
        <div class="sub-top">
          <span>123342</span>
          <em style="font-style:normal">其他统计信息</em>
        </div>
      </div>-->
    </div>
    <div class="main-center">
      <div class="app-1" style="border-radius:10px;overflow:hidden;">
        <div class="nav d-between">
          <span>通知公告</span>
          <em style="font-size:normal;" @click="blackHide(1)">查看更多</em>
        </div>
        <div class="main-apps" style="border-radius:10px;">
          <div class="nomore" v-if="!notify||notify.length==0">没有更多了</div>
          <div
            class="main-app"
            v-for="(item,index) in notify"
            :key="item.id"
            @click="view(item,1,index)"
            :class="{no:item.is_read == 0}"
            style="height: 33.3%;"
          >
            <div class="title d-between">
              <span :class="{readed:item.is_read,onTop:item.is_top==2}">
                {{item.is_top==2?'(顶)':''}}
                {{item.subtitle}}
              </span>
              <sup v-if="item.is_read == 0"></sup>
            </div>
            <div class="content d-between">
              <div class="start d-start">
                <i class="el-icon-user-solid"></i>
                <span v-if="item.admin&&item.admin.account">{{item.admin.account}}</span>
              </div>
              <div class="date">{{item.create_time}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="app-1" style="border-radius:10px;overflow:hidden;">
        <div class="nav d-between">
          <span style="color:#48D15F">收发文</span>
          <em style="font-size:normal;" @click="blackHide(2)">查看更多</em>
        </div>
        <div class="main-apps" style="border-radius:10px;">
          <div class="nomore" v-if="!write||write.length==0">没有更多了</div>
          <div
            class="main-app"
            style="height: 50%"
            v-for="(item,index) in write"
            :key="item.id"
            @click="view(item,2,index)"
            :class="{no:item.is_read == 0}"
          >
            <div class="title d-between">
              <span :class="{readed:item.is_read,onTop:item.is_top==2}">
                {{item.is_top==2?'(顶)':''}}
                {{item.subtitle}}
              </span>
              <sup v-if="item.is_read == 0"></sup>
            </div>
            <div class="center-app d-start">
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.xmarr.map(item=>item.xmmc).join(',')"
                placement="top-start"
              >
                <span>{{item.xmarr.map(item=>item.xmmc).join(',')}}</span>
              </el-tooltip>
              <p
                v-if="item.files&&item.files.split(',').length>0"
              >附件({{item.files.split(',').length}})</p>
            </div>
            <div class="content d-between">
              <div class="start d-start">
                <i class="el-icon-user-solid"></i>
                <span v-if="item.admin&&item.admin.account">{{item.admin.account}}</span>
              </div>
              <div class="date">{{item.create_time}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="app-1">
        <div class="nav d-start">
          <span style="color:#76797d">概算投资 （万元）</span>
        </div>
        <div class="main-apps-echarts" ref="ref3"></div>
      </div>
      <div class="app-1">
        <div class="nav d-start">
          <span style="color:#76797d">建设里程 （km）</span>
        </div>
        <div class="main-apps-echarts" ref="ref1"></div>
      </div>
      <div class="app-1">
        <div class="nav d-start">
          <span style="color:#76797d">技术等级 (km)</span>
        </div>
        <div class="main-apps-echarts" ref="ref2"></div>
      </div>

      <div class="app-1">
        <div class="nav d-start">
          <span style="color:#76797d">项目分类 (个)</span>
        </div>
        <div class="main-apps-echarts" ref="ref4"></div>
      </div>
    </div>
    <!-- <transition name="delpop">
      <div class="right-hide" v-if="visibalHide == 2">
        <div class="scroll-top-green"></div>
        <div class="title-y">
          <i class="el-icon-message-solid" style="color:#25b83d;"></i>
          <span>收发文</span>
        </div>
        <div class="main-right-hide">
          <div class="nav">
            <el-form :model="form">
              <el-row class="d-start" :gutter="20">
                <el-col :span="12">
                  <el-form-item prop="date" label="时间筛选">
                    <el-date-picker
                      value-format="yyyy-MM-dd"
                      size="medium"
                      v-model="form.date"
                      type="date"
                      placeholder="选择日期"
                      style="width:100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="project" label="项目筛选">
                    <el-input size="medium" v-model="form.project"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="y-main">
              <div
                class="main-app"
                v-for="(item,index) in data.writing"
                :key="item.id"
                @click="view(item,2,index)"
              >
                <div class="title d-between">
                  <span class="d-start">{{item.subtitle}}</span>
                  <sup v-if="item.is_read == 0"></sup>
                </div>
                <div class="center-app d-start">
                  <span class="d-center">项目名称</span>
                  <p>附件2</p>
                </div>
                <div class="content d-between">
                  <div class="start d-start">
                    <i class="el-icon-user-solid"></i>
                    <span>王小明</span>
                  </div>
                  <div class="date">{{item.create_time}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-hide" v-if="visibalHide == 1">
        <div class="scroll-top-blue"></div>
        <div class="title-y">
          <i class="el-icon-message-solid" style="color:#238af5;"></i>
          <span style="color:#238AF5;">通知公告</span>
        </div>
        <div class="main-right-hide">
          <div class="nav">
            <el-form :model="form">
              <el-row class="d-start" :gutter="20">
                <el-col :span="12">
                  <el-form-item prop="date" label="时间筛选">
                    <el-date-picker
                      value-format="yyyy-MM-dd"
                      size="medium"
                      v-model="form.date"
                      type="date"
                      placeholder="选择日期"
                      style="width:100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="project" label="项目筛选">
                    <el-input size="medium" v-model="form.project"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="y-main">
              <div class="main-apps">
                <div
                  class="main-app"
                  v-for="(item,index) in data.notice"
                  :key="item.id"
                  @click="view(item,1,index)"
                >
                  <div class="title d-between">
                    <span class="d-start">{{item.subtitle}}</span>
                    <sup v-if="item.is_read == 0"></sup>
                  </div>
                  <div class="content d-between">
                    <div class="start d-start">
                      <i class="el-icon-user-solid"></i>
                      <span>王小明</span>
                    </div>
                    <div class="date">{{item.create_time}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <div class="black" @click="visibalHide = 0" v-if="visibalHide != 0"></div>
    <div class="icon-header d-center">
      <div class="notify d-start" @click="blackHide(1)">
        <div
          class="lef d-center"
          style="width: 39px;height: 100%;background: #238af5;border-radius: 4px 0px 0px 4px;color:white;"
        >
          <i class="el-icon-bell d-center" style="color:white;"></i>
        </div>
        <span
          style="color:#FFFFFF;font-size: 12px;font-weight: 400;width:calc(100% - 39px)"
          class="d-center"
        >通知公告</span>
        <em v-if="allnotifyReaf == 0"></em>
      </div>
      <div class="receive d-start" @click="blackHide(2)">
        <div
          class="lef d-center"
          style="width: 39px;height: 100%;background: #25b83d;border-radius: 4px 0px 0px 4px;color:white;"
        >
          <i class="el-icon-message-solid" style="color:white;"></i>
        </div>
        <span
          style="color:#FFFFFF;font-size: 12px;font-weight: 400;width:calc(100% - 39px)"
          class="d-center"
        >收发文</span>
        <em v-if="allwriteReaf == 0"></em>
      </div>
    </div>-->
    <el-dialog :visible.sync="dialogFormVisible" width="80%">
      <el-form>
        <h2 class="h2">
          <span v-text="content.title"></span> &nbsp;
          <small v-text="content.create_time"></small>
        </h2>
        <hr class="hr" />
        <div v-html="content.content" class="img"></div>
        <uploader
          :fileslists="fileslist"
          :options="options"
          :file-status-text="statusText"
          :fileurl="this.$updata"
          class="uploader-example"
          ref="uploader"
          :app="false"
          v-if="fileslist"
        ></uploader>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible=false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      loading: true,
      dialogFormVisible: false,
      data: [],
      content: {},
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      echarts1: null,
      echarts2: null,
      echarts3: null,
      echarts4: null,
      form: {},
      visibalHide: 0,
      // write: [],
      // notify: [],
      allnotifyReaf: null,
      allwriteReaf: null,
      gstz: {},
      zlc: {},
      xmgss: {},
      jsdjs: {},
      clientHeight: "",
      daxiao: "",
      fileslist: [],
      options: {
        target: this.$updata + "/api/index/uploads", // '//jsonplaceholder.typicode.com/posts/',
        testChunks: false
      },
      statusText: {
        success: "成功了",
        error: "出错了",
        uploading: "上传中",
        paused: "暂停中",
        waiting: "等待中"
      }
      //上传
    };
  },
  mounted: function() {
    this.clientHeight = `${document.documentElement.clientWidth}`;
    this.getdata();
    window.addEventListener("resize", this.resizeE);
    this.$Bus.$on("searchHome", () => {
      this.getdata(2);
    });
  },
  methods: {
    resizeE() {
      this.echarts1.resize();
      this.echarts2.resize();
      this.echarts3.resize();
      this.echarts4.resize();
      this.clientHeight = `${document.documentElement.clientWidth}`;
    },
    init() {
      this.option1 = this.echartsOpation1();
      this.option2 = this.echartsOpation2();
      this.option3 = this.echartsOpation3();
      this.option4 = this.echartsOpation4();

      this.echarts1 = this.$echarts.init(this.$refs.ref1);
      this.echarts2 = this.$echarts.init(this.$refs.ref2);
      this.echarts3 = this.$echarts.init(this.$refs.ref3);
      this.echarts4 = this.$echarts.init(this.$refs.ref4);

      this.echarts1.setOption(this.option1);
      this.echarts2.setOption(this.option2);
      this.echarts3.setOption(this.option3);
      this.echarts4.setOption(this.option4);
    },
    echartsOpation1() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{b} : {c} km"
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "5%",
          containLabel: true
        },
        yAxis: {
          type: "value"
        },
        xAxis: {
          type: "category",
          data: this.data.statistics.zlc.label
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              color: "#a391c7"
            },
            data: this.data.statistics.zlc.datas
          }
        ]
      };
    },
    echartsOpation2() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{b} : {c} km"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "5%",
          containLabel: true
        },
        yAxis: {
          type: "value"
        },
        xAxis: {
          type: "category",
          data: this.data.statistics.jsdjs.label
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              color: "#2ec7c9"
            },
            data: this.data.statistics.jsdjs.datas
          }
        ]
      };
    },
    echartsOpation3() {
      return {
        color: ["#ffcd56", "#4bc0c0", "#36a2eb", "#ff6384", "#ff9f40"],
        legend: {
          data: this.data.statistics.gstz.label,
          bottom: 0,
          left: "center",
          itemHeight: 9,
          itemWidth: 12
        },
        // grid: {
        //   left: "3%",
        //   right: "4%",
        //   bottom: "3%",
        //   containLabel: true
        // },
        tooltip: {
          // trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            center: ["50%", "40%"],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: this.gstz
          }
        ]
      };
    },
    echartsOpation4() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{b} : {c} 个"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "5%",
          containLabel: true
        },
        yAxis: {
          type: "value"
        },
        xAxis: {
          type: "category",
          data: this.data.statistics.xmgss.label
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              color: "#5ab1ef"
            },
            data: this.data.statistics.xmgss.datas
          }
        ]
      };
    },
    blackHide(item) {
      this.$Bus.$emit("blackHide", item);
      this.visibalHide = item;
    },
    sortLabel(data) {
      let item1 = [];
      let item2 = [];
      item1[0] = data.label[1];
      item1[1] = data.label[3];
      item1[2] = data.label[0];
      item1[3] = data.label[2];

      item2[0] = data.datas[1];
      item2[1] = data.datas[3];
      item2[2] = data.datas[0];
      item2[3] = data.datas[2];
      data.label.forEach((v, index) => {
        if (v.indexOf("新建") > -1) {
          item1[0] = v;
          item2[0] = data.datas[index];
        }
        if (v.indexOf("续建") > -1) {
          item1[1] = v;
          item2[1] = data.datas[index];
        }
        if (v.indexOf("交工") > -1) {
          item1[2] = v;
          item2[2] = data.datas[index];
        }
        if (v.indexOf("竣工") > -1) {
          item1[3] = v;
          item2[3] = data.datas[index];
        }
      });
      return { label: item1, datas: item2 };
    },
    getdata(a = 1) {
      let that = this;
      if (a == 1) {
        that.loading = true;
      }
      this.$get("/api/index/index", this.searchs).then(res => {
        if (res.code == 200) {
          that.data = res.data;
          // this.fileslist = item.filesarr;
          this.data.statistics.gstz = {
            ...this.sortLabel(this.data.statistics.gstz)
          };
          this.data.statistics.zlc = {
            ...this.sortLabel(this.data.statistics.zlc)
          };
          this.data.statistics.xmgss = {
            ...this.sortLabel(this.data.statistics.xmgss)
          };

          this.$Bus.$emit("is_read", res.data.is_notice, res.data.is_writing);

          if (
            this.data.statistics.gstznum >= 10000 &&
            this.data.statistics.gstznum < 100000000
          ) {
            this.daxiao = "万元";
          } else {
            this.daxiao = "亿元";
          }
          this.gstz = res.data.statistics.gstz.label.map((v, index) => {
            return { name: v, value: res.data.statistics.gstz.datas[index] };
          });
          if (that.data.writing) {
            that.data.writing.forEach(item => {
              // item.subtitle = this.ellipsis(item.title);
              item.subtitle = item.title;
            });
            let arrRead = that.data.writing.filter(item => {
              return item.is_read == 0;
            });
            if (arrRead.length > 0) {
              this.allwriteReaf = 0;
            } else {
              this.allwriteReaf = 1;
            }
          }
          if (that.data.notice) {
            that.data.notice.forEach(item => {
              // item.subtitle = this.ellipsis(item.title);
              item.subtitle = item.title;
            });
            let arrRead = that.data.notice.filter(item => {
              return item.is_read == 0;
            });
            if (arrRead.length > 0) {
              this.allnotifyReaf = 0;
            } else {
              this.allnotifyReaf = 1;
            }
          }
          this.init();
        }
        setTimeout(function() {
          that.loading = false;
        }, 300);
      });
    },
    view(item, type, index) {
      this.dialogFormVisible = true;
      this.content = item;
      this.fileslist = item.filesarr ? item.filesarr : null;
      var url =
        type == 1 ? "/api/Engineer/notice_read" : "/api/Engineer/writing_read";
      if (!item["is_read"]) {
        this.$post(url, { id: item.id }).then(res => {
          if (res.code == 200) {
            item["is_read"] = 1;
            type == 1
              ? (this.data.notice[index].is_read = 1)
              : (this.data.writing[index].is_read = 1);

            let arrRead1 = this.data.notice.filter(items => {
              return items.is_read == 0;
            });
            if (arrRead1.length > 0) {
              this.allnotifyReaf = 0;
            } else {
              this.allnotifyReaf = 1;
            }

            let arrRead2 = this.data.writing.filter(items => {
              return items.is_read == 0;
            });

            if (arrRead2.length > 0) {
              this.allwriteReaf = 0;
            } else {
              this.allwriteReaf = 1;
            }
            this.$Bus.$emit("search");
          }
        });
      }
    },
    ellipsis(value) {
      if (!value) return "";

      if (value.length > 7) {
        return value.slice(0, 7) + "...";
      }
      return value;
    }
  },
  computed: {
    notify() {
      if (!this.data.notice) {
        return [];
      }
      if (this.data.notice.length > 3) {
        return this.data.notice.slice(0, 3);
      } else {
        return this.data.notice.slice(0, this.data.notice.length);
      }
    },
    write() {
      if (!this.data.writing) {
        return [];
      }
      if (this.data.writing.length > 2) {
        return this.data.writing.slice(0, 2);
      } else {
        return this.data.writing.slice(0, this.data.writing.length);
      }
    },
    zlcnum() {
      if (this.data.statistics) {
        return this.data.statistics.zlcnum ? this.data.statistics.zlcnum : 0;
      } else {
        return 0;
      }
    },
    gstznum() {
      //判断 钱显示的单位
      if (this.data.statistics) {
        if (
          this.data.statistics.gstznum >= 10000 &&
          this.data.statistics.gstznum < 100000000
        ) {
          return this.data.statistics.gstznum
            ? this.data.statistics.gstznum
            : 0;
        } else {
          return (this.data.statistics.gstznum / 10000).toFixed(2);
        }
      } else {
        return 0;
      }
      // return this.data.statistics.gstznum ? this.data.statistics.gstznum : 0;
    },
    gstznums() {
      if (this.data.statistics) {
        return this.data.statistics.gstznum ? this.data.statistics.gstznum : 0;
      } else {
        return 0;
      }
    },
    xmgsnum() {
      if (this.data.statistics) {
        return this.data.statistics.xmgsnum ? this.data.statistics.xmgsnum : 0;
      } else {
        return 0;
      }
      // return this.data.statistics.xmgsnum ? this.data.statistics.xmgsnum : 0;
    }
  }
};
</script>

<style lang="less" scoped>
.nomore {
  color: #999;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.readed {
  color: #999 !important;
  font-weight: normal !important;
}
.onTop {
  color: #4bc0c0 !important;
}
sup {
  width: 6px;
  height: 6px;
  display: inline-block;
  background: #f00;
  right: 0px;
  position: relative;
  border-radius: 50%;
}
.home {
  width: 100%;
  height: calc(100%);
  position: relative;
  overflow-y: scroll;
  overflow-wrap: hidden;
  .main {
    //   width: 100%;
    height: calc(100% - 60px);
    border: 1px solid #ebeef5;
  }
  .top-home {
    width: 100%;
    height: 150px;
    background: #ffffff;
    border-radius: 10px;

    .one {
      height: 80px;
      width: 33%;
      border-right: 1px solid #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      .title-top {
        width: 51px;
        height: 51px;
        background: #409eff;
        border-radius: 50%;
        margin-right: 10px;
        i {
          font-size: 20px;
        }
      }
      .sub-top {
        span {
          font-size: 41px;
          font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
          font-weight: 400;
          text-align: left;
          color: #5c6b7b;
          span {
            font-size: 16px;
            margin-left: 10px;
          }
        }
        em {
          display: block;
          font-size: 16px;
          font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
          font-weight: 400;
          text-align: left;
          color: #8e99a4;
          // margin-left: 10px;
        }
      }
    }
  }
  .main-center {
    width: 100%;
    height: calc(100% - 204px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    .app-1 {
      width: calc(33% - 13px);
      height: 336px;
      background: #ffffff;
      margin-top: 20px;
      margin-right: 20px;
      border-radius: 10px;
      &:last-child {
        margin-right: 0;
      }
      &:nth-child(3) {
        margin-right: 0;
      }
      .nav {
        width: 100%;
        height: 42px;
        border-bottom: 1px solid #f5f5f5;
        padding: 0 16px;
        span {
          font-size: 14px;
          font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
          font-weight: 700;
          text-align: left;
          color: #409eff;
          max-width: calc(100% - 10px);
        }
        em {
          font-size: 14px;
          font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
          font-weight: 400;
          text-align: left;
          color: #999999;
          font-style: normal;
          cursor: pointer;
        }
      }
      .main-apps {
        height: calc(100% - 42px);
        width: 100%;
        background: #fff;

        // overflow-y: scroll;
        // padding: 0 16px;
      }
      .main-apps-echarts {
        padding: 0 16px;
        height: calc(100% - 42px);
        width: 100%;
      }
      .main-app {
        width: 100%;
        padding: 25px 16px;
        height: 33.333%;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        flex-direction: column;
        background: #fff;
        border-bottom: 1px solid #eee;
        // overflow: hidden;
        cursor: pointer;
        .title {
          font-size: 14px;
          font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
          font-weight: 700;
          text-align: left;
          color: #333333;
          line-height: 23px;
          // flex-wrap: wrap;
          position: relative;
          width: 100%;
          span {
            overflow: hidden;
            text-overflow: ellipsis !important;
            -webkit-line-clamp: 1; /* 限制在一个块元素显示的文本的行数 */
            -webkit-box-orient: vertical; /* 垂直排列 */
            word-break: break-all; /* 内容自动换行 */
            white-space: nowrap;
            width: 90%;
          }
        }
        .center-app {
          margin-top: 10px;
          span {
            padding: 4px 13px;
            font-size: 14px;
            font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
            font-weight: 400;
            text-align: left;
            color: #8e99a4;
            background: #f1f6fb;
            border: 1px solid #cad4de;
            border-radius: 5px;
            margin-right: 10px;
            max-width: 200px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          p {
            font-style: normal;
            padding: 4px 13px;
            background: #fff8ef;
            border: 1px solid #ffebd4;
            border-radius: 5px;
            font-size: 14px;
            font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
            font-weight: 400;
            text-align: left;
            color: #f0af64;
          }
        }
        .content {
          width: 100%;
          margin-top: 10px;
          .start {
            i {
              color: #999;
              margin-right: 3px;
            }
            span {
              font-size: 14px;
              font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
              font-weight: 400;
              text-align: left;
              color: #999;
            }
          }
          .date {
            font-size: 14px;
            font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
            font-weight: 400;
            text-align: right;
            color: #999;
          }
        }
      }
      .no {
        background: #ffffff;
      }
    }
  }
  .right-hide {
    width: 400px;
    height: calc(100% + 40px);
    overflow: scroll;
    background: #ffffff;
    position: absolute;
    top: -20px;
    right: -20px;
    z-index: 100;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    .scroll-top-green {
      width: 100%;
      height: 5px;
      background-color: #39c250;
      background-image: -webkit-linear-gradient(
        0,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
      background-repeat: normal;
    }
    .scroll-top-blue {
      width: 100%;
      height: 5px;
      background-color: #238af5;
      background-image: -webkit-linear-gradient(
        0,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
      background-repeat: normal;
    }
    .title-y {
      width: 100%;
      padding: 5px 10px;
      span {
        font-size: 16px;
        font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
        font-weight: 700;
        text-align: left;
        color: #48d15f;
        margin-left: 10px;
      }
    }
    .main-right-hide {
      width: 100%;
      height: calc(100% - 5px);
      padding: 0 16px;

      .y-main {
        .main-app {
          width: 100%;
          // overflow-x: scroll;
          margin-top: 10px;
          padding: 5px;
          border: 1px solid #eeeeee;
          cursor: pointer;
          border-radius: 5px;
          .title {
            font-size: 16px;
            font-family: Microsoft YaHei UI, Microsoft YaHei UI-Bold;
            font-weight: 700;
            text-align: left;
            color: #333333;
            line-height: 23px;
            flex-wrap: wrap;
            position: relative;
            span {
              flex-wrap: wrap;
            }
          }
          .center-app {
            margin-top: 10px;
            span {
              padding: 4px 13px;
              font-size: 14px;
              font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
              font-weight: 400;
              text-align: left;
              color: #8e99a4;
              background: #f1f6fb;
              border: 1px solid #cad4de;
              border-radius: 5px;
              margin-right: 10px;
              max-width: 200px;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            p {
              font-style: normal;
              padding: 4px 13px;
              background: #fff8ef;
              border: 1px solid #ffebd4;
              border-radius: 5px;
              font-size: 14px;
              font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
              font-weight: 400;
              text-align: left;
              color: #f0af64;
            }
          }
          .content {
            width: 100%;
            margin-top: 10px;
            .start {
              i {
                width: 12px;
                height: 14px;
                color: #8e99a4;
                margin-right: 5px;
              }
              span {
                font-size: 14px;
                font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
                font-weight: 400;
                text-align: left;
                color: #8e99a4;
              }
            }
            .date {
              font-size: 14px;
              font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
              font-weight: 400;
              text-align: right;
              color: #8e99a4;
            }
          }
        }
      }
    }
  }
  .black {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    z-index: 99;
    opacity: 0.5;
    background: #000;
  }
}
.img {
  font-size: 14px;
  line-height: 2;
  text-indent: 2em;
}
.h2 {
  text-align: center;
  small {
    font-weight: 400;
    font-size: 12px;
  }
}
.hr {
  margin: 10px 0;
  border: 0;
  border-top: 1px #ddd solid;
}
.img img {
  max-width: 100%;
}

.tit {
  width: 100%;
  height: 64px;
}
.icon-header {
  position: fixed;
  height: 50px;
  top: 0;
  right: 120px;
}
.notify {
  width: 115px;
  height: 35px;
  background: #409eff;
  border-radius: 4px;
  margin-right: 18px;
  position: relative;

  cursor: pointer;
  em {
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    right: -4px;
  }
}
.receive {
  width: 115px;
  height: 35px;
  background: #48d15f;
  border-radius: 4px;
  margin-right: 18px;
  position: relative;
  cursor: pointer;
  em {
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    right: -4px;
  }
}
.font {
  font-size: 30px !important;
}
</style>